<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./注册.css">
</head>

<body>
    <script src="./注册.js"></script>
    <div class="box">
        <h2>注册</h2>
        <div class="input-box">
            <input type="text" class="inp1" placeholder="请输入用户名">
            <span>用户名不能为空</span>
        </div>
        <div class="input-box">
            <input type="password" class="inp2" placeholder="请输入包含大小写的8位密码格式">
            <span>请输入正确的密码格式</span>
        </div>
        <div class="input-box">
            <input type="password" class="inp3" placeholder="请再次输入密码">
            <span>密码和上面不同</span>
        </div>
        <div class="input-box">
            <input type="text" class="inp4" placeholder="请输入手机号">
            <span>请输入正确的手机号格式</span>
        </div>
        <div class="input-box">
            <input type="text" class="inp5" placeholder="请输入邮箱">
            <span>请输入正确的邮箱格式</span>
        </div>
        <div class="btn-box">
            <div>
                <button onclick="fn()">注册</button>
            </div>
        </div>
    </div>
    <script>
        // 用户名
        var na = document.querySelector('.inp1')
        na.addEventListener('blur', () => {
            if (event.target.value == '') {
                event.target.nextElementSibling.style.display = 'block'
            } else {
                event.target.nextElementSibling.style.display = 'none'
            }
        })

        // 密码
        var pa = document.querySelector('.inp2')
        var rel = /^(?=.{8})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d).*$/
        pa.addEventListener('blur', () => {
            if (rel.test(event.target.value)) {
                event.target.nextElementSibling.style.display = 'none'
            } else {
                event.target.nextElementSibling.style.display = 'block'
            }
        })

        // 确认密码
        var pass = document.querySelector('.inp3')
        pass.addEventListener('blur', () => {
            if (pa.value == pass.value) {
                event.target.nextElementSibling.style.display = 'none'
            } else {
                event.target.nextElementSibling.style.display = 'block'
            }
        })

        // 手机号
        var num = document.querySelector('.inp4')
        var rel2 = /^1[3456789]\d{9}$/
        num.addEventListener('blur', () => {
            if (rel2.test(event.target.value)) {
                event.target.nextElementSibling.style.display = 'none'
            } else {
                event.target.nextElementSibling.style.display = 'block'
            }
        })

        // 邮箱
        var em = document.querySelector('.inp5')
        var rel3 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
        em.addEventListener('blur', () => {
            if (rel3.test(event.target.value)) {
                event.target.nextElementSibling.style.display = 'none'
            } else {
                event.target.nextElementSibling.style.display = 'block'
            }
        })

        function fn() {
            var yhm = document.querySelector('.inp1').value
            var mm = document.querySelector('.inp2').value
            var mm1 = document.querySelector('.inp3').value
            var sjh = document.querySelector('.inp4').value
            var yx = document.querySelector('.inp5').value
            localStorage.setItem('name', yhm)
            localStorage.setItem('password', mm)
            localStorage.setItem('password1', mm1)
            localStorage.setItem('number', sjh)
            localStorage.setItem('email', yx)
            if (na.value == "") {
                alert('用户名格式有误');
            } else if (!rel.test(mm)) {
                alert('密码有误');
            } else if (mm != mm1) {
                alert('确认密码不一致');
            } else if (!rel2.test(sjh)) {
                alert('手机号格式有误');
            } else if (!rel3.test(yx)) {
                alert('邮箱格式有误');
            } else {
                alert('注册成功')
                location.assign("../登录/登录.html")
            }
        }
    </script>
</body>

</html>